<template>
  <div class="chart-container">
    <slot></slot> <!-- 插槽用于接收标题 -->
    <div ref="chartRef" class="chart-content"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import axios from 'axios';
import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import {
  TooltipComponent,
  GridComponent,
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([TooltipComponent, GridComponent, LineChart, CanvasRenderer]);

const chartRef = ref(null);
let chartInstance = null;

const option = ref({ // 每日评论数量 - Line Chart Option (Copied from Home.vue)
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(0, 10, 30, 0.8)',
    borderColor: '#0ff',
    textStyle: { color: '#fff' },
    axisPointer: {
        type: 'cross',
        label: { backgroundColor: '#6a7985' }
    }
  },
  grid: {
    left: '3%', right: '4%', bottom: '5%', top: '15%', containLabel: true
  },
  xAxis: {
    type: 'category', boundaryGap: false, data: [],
    axisLabel: { color: 'rgba(204, 238, 255, 0.8)' },
    axisLine: { lineStyle: { color: 'rgba(0, 198, 255, 0.5)' } },
    axisTick: { show: false },
  },
  yAxis: {
    type: 'value',
    axisLabel: { color: 'rgba(204, 238, 255, 0.8)' },
    axisLine: { show: true, lineStyle: { color: 'rgba(0, 198, 255, 0.5)' } },
    splitLine: { show: true, lineStyle: { color: 'rgba(0, 198, 255, 0.1)', type: 'dashed' } }
  },
  series: [{
    name: '评论数量', type: 'line', smooth: true, symbol: 'none', data: [],
    lineStyle: { color: '#0ff', width: 2, shadowColor: 'rgba(0, 255, 255, 0.5)', shadowBlur: 10 },
    areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0, color: 'rgba(0, 255, 255, 0.3)'
        }, {
            offset: 1, color: 'rgba(0, 255, 255, 0.05)'
        }])
    },
    itemStyle: { color: "#0ff" }
  }]
});

const initChart = async () => {
  if (!chartRef.value) return;
  chartInstance = echarts.init(chartRef.value);
  try {
    const res = await axios.get('/api/daily_comment_count');
    if (res.data.code === 200) {
        option.value.xAxis.data = res.data.data.map(item => item.date);
        option.value.series[0].data = res.data.data.map(item => item.count);
        chartInstance.setOption(option.value);
    } else {
        console.error("Chart1 Error:", res.data.msg);
    }
  } catch (error) {
    console.error("Chart1 Network Error:", error);
  }
};

const resizeHandler = () => {
  chartInstance?.resize();
};

onMounted(async () => {
  await nextTick();
  initChart();
  window.addEventListener('resize', resizeHandler);
});

onUnmounted(() => {
  window.removeEventListener('resize', resizeHandler);
  chartInstance?.dispose();
});
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.chart-content {
  flex-grow: 1; /* 让图表内容区域填充剩余空间 */
  width: 100%;
  height: 100%; /* 确保高度计算正确 */
}
/* 移除 .chartitle 样式，因为它将由父组件通过 slot 传入 */
</style>